<template>
    <section id="testimonial">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-md-12">
            <div class="testimonial-area">
                <headerr></headerr>
                <div class="testimonial-area">
                <ul class="testimonial-nav" id="testimonialnodes" style="height:300px;">
                    <li v-for="data in Users" :key="data" >
                        <user v-show="data.flag">
                            <template slot="a">
                                <img :src=data.image alt="img">
                            </template>
                            <template slot="b">
                                <p class="testimonial-parg">{{data.words}}</p>
                            </template>
                        </user>
                    </li>
                </ul>
                </div>
                <ul class="buttons">
                    <li class="button" v-for="id in arr" :key="id"><div class="radius" @mouseover="over(id)"  :class="{activeClass:flag[id]}"></div></li>
                </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
</template>

<script>
import headerr from './usersChild/head'
import user from './usersChild/users'
export default {
  data () {
    return {
      Users: [// 用户对象数组
        new this.UsersFun('images/users1.jpg', '宿蜂是一款非常轻便的小程序，一键发单，接单速度快，准时高效，为我的生活提供了很多便利。', true),
        new this.UsersFun('images/users2.jpg', '刚接触宿蜂是被朋友安利的，听说是一群学姐学长创业做的，就尝试了一下。发现真的很人性化，减少了很多沟通的成本。现在一有快递，就想到去宿蜂发单。偶尔自己取快递的时候，也会接别人发的订单，顺路送一下。', false),
        new this.UsersFun('images/users3.jpg', '相比于我之前用过的校园跑腿小程序来说，宿蜂更加值得信赖，只要是在两个方面，第一：接单的人都有宿蜂平台的审核，确保是学生才会审核通过；第二：完善的发单接单流程，有人接单后，会把接单员的一些信息告知给发单人，体验很好，不用担心包裹丢失。', false),
        new this.UsersFun('images/users4.jpg', '我是宿蜂的认证接单员，在宿蜂平台上通过接单，算是也赚到了一些生活费。一开始也只是试试的态度，但接触到了宿蜂创业团队的成员，也是跟我差不多大的学生，我觉得他们是在做一件很了不起的事情。', false),
        new this.UsersFun('images/users5.jpg', '宿蜂的主要特色就是顺路带物，互帮互助。平台的“宿蜂榜”真的超级吸引人，多劳多得被完美诠释出来，并且并没有什么套路，简单粗暴，希望宿蜂能够继续这样下去，', false)
      ],
      flag: [
        true,
        false,
        false,
        false,
        false
      ],
      arr: [
        0, 1, 2, 3, 4
      ]
    }
  },
  components: {
    headerr,
    user
  },
  methods: {
    UsersFun (image, words, flag) { // 用户对象函数
      this.image = image
      this.words = words
      this.flag = flag
    },
    over (id) {
      for (var i = 0; i < this.flag.length; i++) {
        this.flag[i] = false
        this.Users[i].flag = false
      }
      this.flag[id] = true
      this.Users[id].flag = true
    }
  }
}
</script>

<style scoped>
.buttons{
    position: relative;
    left: 50%;
    transform:  translateX(-125px);
}
.button{
    list-style: none;
    float: left;
    margin: 10px;
}
.radius{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffd113;
}
.activeClass{
    background-color: white;
    border: 2px solid #ffd113;
}
</style>
